<template>
    <p>销售图</p>
    <div id="main1" style="width: 500px ; height: 500px;">
    </div>
</template>

<script setup lang="ts">
import { getEatchsApi } from "@/api/Eatchs"
import * as echarts from 'echarts/core';
import { GridComponent, GridComponentOption } from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted, reactive } from 'vue';

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<
    GridComponentOption | LineSeriesOption
>;


// 发请求
// 创建响应式数据
const EatchsWeek = reactive([])
const EatchsVal = reactive([])
const getEatchsApiData = async () => {
    let res = await getEatchsApi()
    if (res.data.code == "200") {
        res.data.data.forEach(element => {
            EatchsWeek.push(element.x)
            EatchsVal.push(element.val)

        });
        EachsDatabiao()
        // console.log(EatchsVal);

    }
}

const EachsDatabiao = () => {
    var chartDom = document.getElementById('main1') as HTMLElement;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    option = {
        xAxis: {
            type: 'category',
            data: EatchsWeek
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: EatchsVal,
                type: 'line'
            }
        ]
    };


    option && myChart.setOption(option);
}

onMounted(() => {
    getEatchsApiData()

})

</script>

<style scoped></style>